<template>
  <view class="app">
    <view>服务器数据:</view>
    <view id="Time"></view>
    <view>
      <view v-for="(item, key) in list" :key="key">{{ item }}</view>
    </view>

    <!-- <view @click="sendData()">发送当前时间</view> -->

    <view class="bg-green-400 p-5 mt-5">
      <input type="text" v-model="message" />
    </view>
    <button @click="sendData()">发送</button>

    <view> </view>
    <button @click="linkServer()">连接</button>
    <button @click="closeServer()">关闭连接</button>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getNow } from '@/utils/day';
  import websocketUtil from '@/utils/websocket';

  var ws: any;

  const message = ref<string>('');
  const list = ref<string[]>([]);

  const sendData = () => {
    console.log('发送时间到服务器');
    ws.sendMsg(message.value);
    list.value.push(message.value);
  };

  const linkServer = () => {
    ws = new websocketUtil('ws://127.0.0.1:10003/ws/send', 5);

    ws.getMsg((data: any) => {
      console.log(data);
      console.log(typeof data);

      list.value.push(data);
      // document.getElementById('Time').textContent = res.data;
    });
  };

  const closeServer = () => {
    ws.close();
  };
</script>

<style lang="scss" scoped></style>
